<template>
  <div class="ThemeInput">
    <div class="bd">
      <input
        :type="type"
        v-model="innerValue"
        :placeholder="placeholder"
        @keyup="$emit('keyup')"
      />
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: "ThemeInput",
  props: {
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    placeholder: String
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", String(val).trim());
      }
    }
  }
};
</script>
<style lang="less" scoped>
.ThemeInput {
  padding: 0 36px;
  .bd {
    position: relative;
    background-color: #efefef;
    border-radius: 40px;
  }
  input {
    display: block;
    font-size: 14px;
    line-height: 14px;
    padding: 12px 15px;
    border: 0 none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    outline: none;
  }
}
</style>
